$(function () {



  initArticleList()
  function initArticleList() {
    axios({
      url: '/my/article/cates',
      method: 'get',
    }).then(res => {
      //成功回调
      console.log(res)
      if (res.data.status !== 0) {
        return layui.layer.msg(res.data.message)
      }
      let arr = []
      res.data.data.forEach(ele => {
        arr.push(`
          <tr>
          <td>${ele.Id}</td>
          <td>${ele.name}</td>
          <td>${ele.alias}</td>
          <td>
            <button data-id="${ele.Id}" class="btn-edit layui-btn layui-btn-xs">编辑</button>
            <button data-id="${ele.Id}" class="del-edit  layui-btn layui-btn-danger layui-btn-xs">删除</button>   
          </td>
        </tr>
      `)
      })
      $('tbody').empty().html(arr.join(''))
    })
  }
  let indexAdd = 0
  $('#addBtn').on('click', function () {
    indexAdd = layer.open({
      type: 1,
      title: '添加文章分类',
      area: ['500px', '260px'],
      content: `
          <form id="addForm" class="layui-form" action="">
          <!-- 分类名称 -->
          <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block">
              <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称"
                autocomplete="off" class="layui-input">
            </div>
          </div>
          <!-- 分类别名 -->
          <div class="layui-form-item">
            <label class="layui-form-label">分类别名</label>
            <div class="layui-input-block">
              <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名"
                autocomplete="off" class="layui-input">
            </div>
          </div>
          <!-- 添加与重置 -->
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
        </div>
        </form>
   `
    })
  })
  $('body').on('submit', '#addForm', function (e) {
    e.preventDefault()
    axios({
      url: '/my/article/addcates',
      method: 'post',
      data: $(this).serialize()
    }).then(res => {
      //成功回调
      console.log(res)
      if (res.data.status !== 0) {
        return layui.layer.msg(res.data.message)
      }
      layui.layer.msg('添加成功')
      initArticleList()
      layui.layer.close(indexAdd)
    })
  })
// 修改
let indexEdit = 0
  $('tbody').on('click','.btn-edit', function () {
    indexEdit = layer.open({
      type: 1,
      title: '添加文章分类',
      area: ['500px', '260px'],
      content: `
          <form id="editForm" class="layui-form" lay-filter="editForm" >
          <input type="hidden" name="Id">
          <!-- 分类名称 -->
          <div class="layui-form-item">
            <label class="layui-form-label">修改名称</label>
            <div class="layui-input-block">
              <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称"
                autocomplete="off" class="layui-input">
            </div>
          </div>
          <!-- 分类别名 -->
          <div class="layui-form-item">
            <label class="layui-form-label">分类别名</label>
            <div class="layui-input-block">
              <input type="text" name="alias" required lay-verify="required" placeholder="请输入修改别名"
                autocomplete="off" class="layui-input">
            </div>
          </div>
          <!-- 添加与重置 -->
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button id="add-btn" class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
        </div>
        </form>
   `
    })
    let id = $(this).attr('data-id')
    axios({
      url:'/my/article/cates/'+id,
      method:'get',
    }).then(res=>{
      //成功回调
      console.log(res)
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
layui.form.val('editForm',res.data.data)
    })
  })
  $('body').on('submit', '#editForm', function (e) {
    e.preventDefault()
    axios({
      url: '/my/article/updatecate',
      method: 'post',
      data: $(this).serialize()
    }).then(res => {
      //成功回调
      console.log(res)
      if (res.data.status !== 0) {
        return layui.layer.msg(res.data.message)
      }
      layui.layer.msg('修改成功')
      initArticleList()
      layui.layer.close(indexEdit)
    })
  })

// 删除
  $('tbody').on('click','.del-edit',function(){
    let id = $(this).attr('data-id')
    layer.confirm('是否删除?', {icon: 3, title:'提示'}, function(index){
      axios({
        url:'/my/article/deletecate/'+id,
        method:'get',
      }).then(res=>{
        //成功回调
        console.log(res)
        if (res.data.status !== 0) {
          return layui.layer.msg(res.data.message)
        }
        layui.layer.msg('删除成功')
        initArticleList()
      });
      
      layer.close(index);
    });
  })

})